<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="position:absolute;left:0;top:3px">
              <table style="float:left">
                  <tr>
                      <td>快速查询</td>
                      <td>
                          <el-input v-model.trim="querytext" @input="quickQuery($event)" placeholder="手术代码|手术名称|助记符" style="width:180px" clearable></el-input>
                      </td>
                  </tr>
              </table>
          </div>
          <div style="position:absolute;right:0;top:3px">
              <table>
                  <tr>
                      <td>
                          <el-button type="primary" @click="btnRefresh" icon="el-icon-search" v-has="'PINQUERY'">查询</el-button>
                      </td>
                      <td>
                          <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
                      </td>
                      <td>
                          <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
                      </td>
                      <td>
                          <el-button @click="SaveRecord" icon="el-icon-document">保存</el-button>
                      </td>
                      <td>
                          <el-button @click="RecordExport" icon="el-icon-upload2" v-has="'PEXPORT'">导出</el-button>
                      </td>
                      <td>
                          <el-button @click="RecordImport" icon="el-icon-upload2" v-has="'PIMPORT'">导入</el-button>
                      </td>
                      <td>
                          <el-button @click="syncData" icon="el-icon-position" v-has="'PSYNC'">同步</el-button>
                      </td>
                  </tr>
              </table>
          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center" style="height:100%;">
              <vxe-table :loading="loading" :data.sync="tableDataShow" :row-class-name="rowClassName" @current-change="currentChangeEvent" border :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false,activeMethod:cellactiveMethod}" @edit-actived="CellActive" :edit-rules="operate_validRules" :keyboard-config="keyConfig" height="auto" header-align="center" @edit-closed="EditChange" highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini">
                  <vxe-table-column type="index" title="NO." width="50" align="center"></vxe-table-column>
                  <vxe-table-column field="operateno" title="手术代码" width="100" sortable :edit-render="{name:'input',autoselect: true}">
                      <template v-slot:header="{ column }">
                          <span style="color: blue;">手术代码</span>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column field="operatename" title="手术名称" width="200" :edit-render="{name:'input',autoselect: true}" sortable>
                      <template v-slot:header="{ column }">
                          <span style="color: blue;">手术名称</span>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column field="operatekind" title="手术类别" width="100" :edit-render="{name:'input',autoselect: true}" sortable>
                  </vxe-table-column>
                  <vxe-table-column field="oplevel" title="手术级别" width="65" :edit-render="{name:'select',options: levelOptions}" sortable>
                  </vxe-table-column>
                  <vxe-table-column field="category" title="专业类别" width="80" :edit-render="{name:'input',autoselect: true}" sortable>
                  </vxe-table-column>
                  <vxe-table-column field="his_operateno" title="HIS代码" width="120" :edit-render="{name:'input',autoselect: true}" sortable>
                  </vxe-table-column>
                  <vxe-table-column field="description" title="备注" width="300" :edit-render="{name:'input',autoselect: true}" sortable>
                  </vxe-table-column>
                  <vxe-table-column field="inputcode" title="助记符" width="120" :edit-render="{name:'input',autoselect: true}" sortable>
                  </vxe-table-column>
                  <vxe-table-column field="hospcode" title="医院" width="200" header-align="center" :edit-render="{name:'select',options: HospitalOptions}">
                  </vxe-table-column>
              </vxe-table>
          </div>
      </div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span><span class="el-icon-info">确定删除手术名称为<b style="color:red">{{ message }}</b>的记录吗？</span></span>
          <span slot="footer" class="dialog-footer">
              <el-button @click="SubmitDel">确 定</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "MNG215",
  data() {
      return {
          tableData: [],
          tableDataShow: [],
          querytext: "",
          message: "",
          selectrow: [],
          HospitalOptions: [],
          curselectrow: "",
          actionindex: 0,
          tempindex: 0,
          dialogVisible: false,
          loading: false,
          okFirstLoading: true,
          utype: this.$tool.getSession(this.$tool.loginutype),
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
          },
          operate_validRules: {
              operateno: [{ required: true, message: "手术代码必须填写" }],
              operatename: [{ required: true, message: "手术名称必须填写" }],
              his_operateno: [{ required: true, message: "HIS代码必须填写" }],
          },
          levelOptions: [
              { label: "", value: "" },
              { label: "一级", value: "1" },
              { label: "二级", value: "2" },
              { label: "三级", value: "3" },
              { label: "四级", value: "4" },
          ],
      };
  },
  created() {
      this.ddlInitdata();
      this.InitPageDate(); //初始化主列表
      this.$ddldata.IsAreaModeFun().then((r) => {});
  },
  mounted() {},
  updated() {
      if (this.okFirstLoading) {
          let currentrow = "";
          if (this.actionindex != 0) {
              //新增，修改，删除
              if (this.actionindex == 3) {
                  //如果是删除
                  if (this.tempindex > 0) {
                      currentrow = this.$refs.xTable.getData(this.tempindex);
                  } else {
                      currentrow = this.$refs.xTable.getData(0);
                  }
              } else {
                  //新增或修改
                  if (this.curselectrow && this.curselectrow != "") {
                      this.$nextTick(() => {
                          let row = this.curselectrow;
                          var alld = this.$refs.xTable.tableData;
                          for (var i = 0; i < alld.length; i++) {
                              if (alld[i].operateno == row.operateno) {
                                  this.tempindex = i;
                                  break;
                              }
                          }
                          currentrow = this.$refs.xTable.getData(this.tempindex);
                      });
                  } else {
                      currentrow = this.$refs.xTable.getData(0);
                  }
              }
          } else {
              //查询
              currentrow = this.$refs.xTable.getData(0);
              this.actionindex = 2;
          }
          this.$nextTick(() => {
              if (currentrow) {
                  this.curselectrow = currentrow;
                  this.okFirstLoading = false;
                  this.$refs.xTable.setCurrentRow(currentrow);
                  this.message = currentrow.operatename;
                  this.$refs.xTable.scrollToRow(currentrow);
              }
          });
      }
  },
  methods: {
      InitPageDate() {
          this.loading = true;
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG215",
                  method: "post",
                  data: {
                      action: "query",
                  },
              })
              .then((res) => {
                  this.tableData = res.Data;
                  this.tableDataShow = res.Data;
                  this.loading = false;
                  this.okFirstLoading = true;
              })
              .catch((e) => {
                  console.log("error", e);
              });
      },
      ddlInitdata() {
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG215",
                  method: "post",
                  data: {
                      action: "ddlInitialList",
                  },
              })
              .then((response) => {
                  this.HospitalOptions = response;
              });
      },
      quickQuery(e) {
          let inputtxt = this.querytext.trim();
          if (inputtxt) {
              console.log(inputtxt);
              this.tableDataShow = this.tableData.filter((m) => m.operateno.indexOf(inputtxt) > -1 || m.operatename.indexOf(inputtxt) > -1 || (m.inputcode ? m.inputcode.toUpperCase().indexOf(inputtxt.toUpperCase()) > -1 : false));
          } else {
              this.tableDataShow = this.tableData;
          }
      },
      rowClassName({ row, rowIndex }) {
          if (row.hospcode == "All" && this.utype != "G") {
              return "row-gray";
          }
          let isDirty = this.$refs.xTable.hasRowChange(row);
          if (isDirty) {
              return "row-modify";
          }
          if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
      },
      btnRefresh() {
          this.InitPageDate();
      },
      syncData() {
          this.loading = true;
          this.$tool
              .request({
                  url: "MNG/MNG2/MNG215",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "syncdata",
                  },
              })
              .then((response) => {
                  if (response.err == 0) {
                      let msg = response.msg;
                      if (!msg) msg = "同步数据获取失败！";
                      this.loading = false;
                      this.$alert(msg);
                      return;
                  }
                  // let data = response.data;
                  // data.forEach((item) => {
                  //     let rest = this.tableData.filter((element) => element.operateno == item.operateno);
                  //     if (rest.length > 0) {
                  //         try {
                  //             rest.forEach((ele) => {
                  //                 if (ele.operateno == item.operateno) {
                  //                     ele.operatename = item.operatename;
                  //                     ele.operatekind = item.operatekind == "" ? ele.operatekind : item.operatekind;
                  //                     ele.his_operateno = item.his_operateno == "" ? ele.his_operateno : item.his_operateno;
                  //                     ele.description = ele.operatename == item.operatename ? "" : item.operatename;
                  //                     ele.inputcode = item.inputcode;
                  //                     ele.hospcode = item.hospcode == "" ? ele.hospcode : item.hospcode;
                  //                     throw Error();
                  //                 }
                  //             });
                  //         } catch (e) {}
                  //     } else {
                  //         let initialdata = {
                  //             operateno: item.operateno,
                  //             operatename: item.operatename,
                  //             his_operateno: item.his_operateno,
                  //             operatekind: item.operatekind,
                  //             description: null,
                  //             inputcode: item.inputcode,
                  //             hospcode: item.hospcode,
                  //         };
                  //         this.$refs.xTable.insert(initialdata);
                  //     }
                  // });
                  this.loading = false;
                  this.InitPageDate();
                  this.$message({
                      type: "warining",
                      message: "手术字典数据更新完成！",
                  });
              })
              .catch((e) => {
                  console.log("error", e);
                  this.loading = false;
              });
      },
      currentChangeEvent({ row, rowIndex }) {
          this.message = row.operatename;
          this.actionindex = 2; //修改
          this.tempindex = rowIndex;
          this.curselectrow = row;
      },
      btnAdd() {
          this.$refs.xTable
              .insert({
                  operateno: "",
                  operatename: "",
                  operatekind: "",
                  his_operateno: "",
                  description: "",
                  inputcode: "",
                  hospcode: this.$ddldata.IsAreaMode ? this.$tool.getSession(this.$tool.selectedhis) : "All",
              })
              .then(({ row }) => {
                  this.$refs.xTable.setCurrentRow(row);
                  this.$refs.xTable.setActiveRow(row, "operateno");
                  this.curselectrow = row;
              });
          this.actionindex = 1; //增加
          this.FunscrollY();
      },
      FunscrollY() {
          this.$nextTick(() => {
              var alldataLen = this.$refs.xTable.tableData.length;
              let L = this.$refs.xTable.getTableData().fullData[alldataLen - 1];
              this.$refs.xTable.scrollToRow(L);
          });
      },
      btnDelete() {
          if (this.utype != "G" && this.curselectrow.hospcode == "All") {
              this.$alert("您不是管理员，不能删除医院代码为All的数据！", "提示", {
                  confirmButtonText: "确定",
              });
              return false;
          } else {
              if (this.message == "") {
                  this.SubmitDel();
              } else {
                  this.dialogVisible = true;
              }
          }
          // this.dialogVisible = true;
      },
      SubmitDel() {
          let delrow = this.$refs.xTable.getCurrentRow();
          if (delrow) {
              var alld = this.$refs.xTable.tableData;
              var rowindex = alld.indexOf(delrow);
              this.$refs.xTable.remove(delrow);
              this.actionindex = 3; //删除
              let havedata = this.$refs.xTable.tableData;
              if (havedata.length > 0) {
                  if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                  this.tempindex = rowindex;
                  let selectrow = havedata[rowindex];
                  this.$refs.xTable.setCurrentRow(selectrow);
                  this.message = selectrow.operatename;
              }
          } else {
              this.$message({
                  message: "请选择要删除的记录！",
                  type: "warning",
              });
          }
          this.dialogVisible = false;
      },
      EditChange({ row, column }) {
          if (column.property == "operatename") {
              let thisinputcode = "";
              let getpinyin = this.$pinyin(row.operatename, {
                  style: this.$pinyin.STYLE_FIRST_LETTER, // 首字母
                  heteronym: true,
              });
              for (var i = 0; i < getpinyin.length; i++) {
                  var curchar = getpinyin[i];
                  if (curchar.length > 1) {
                      thisinputcode += curchar[0];
                  } else {
                      thisinputcode += curchar;
                  }
              }
              row.inputcode = thisinputcode.toUpperCase();
          }
      },
      SaveRecord() {
          this.$refs.xTable.validate((valid) => {
              if (valid) {
                  let tabledata = this.$refs.xTable.getRecordset();
                  if (tabledata.insertRecords.length > 0) {
                      this.curselectrow = tabledata.insertRecords[0];
                  }
                  this.$tool
                      .request({
                          url: "MNG/MNG2/MNG215",
                          method: "post",
                          data: {
                              action: "save",
                              urec: tabledata,
                          },
                      })
                      .then((response) => {
                          if (response.errcode == "1") {
                              this.$message({
                                  message: "操作成功！",
                                  type: "success",
                              });
                              this.InitPageDate();
                          } else {
                              this.$message({
                                  message: "保存失败！" + response.errmsg,
                                  type: "warning",
                              });
                          }
                      });
              }
          });
      },
      RecordExport() {
          this.$refs.xTable.exportCsv({ filename: "MNG215 手术字典表" });
      },
      RecordImport() {},
      cellactiveMethod({ row, column }) {
          if (this.utype == "G") {
              return true;
          } else {
              if (this.$ddldata.IsAreaMode) {
                  if (row.hospcode == "All") {
                      return false;
                  } else {
                      return true;
                  }
              } else {
                  return true;
              }
          }
      },
      CellActive({ row, rowIndex, column }) {
          let len = this.$refs.xTable.tableData.length;
          if (rowIndex + 1 >= len) {
              if (row.operateno == null) {
                  row.operateno = "";
                  row.operatename = "";
                  row.operatekind = "";
                  row.his_operateno = "";
                  row.description = "";
                  row.inputcode = "";
                  this.actionindex = 1; //新增
              }
          } else {
              this.actionindex = 2; //修改
          }
          this.$refs.xTable.setCurrentRow(row);
          this.message = row.operatename;
          this.tempindex = this.$refs.xTable.getRowIndex(row);
      },
  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
/deep/.middle-center tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
}
/deep/ .middle-center.vxe-table .vxe-body--row.row-gray {
  background-color: #f8f8f8;
}
/deep/ tr.vxe-body--row.row-modify {
  color: blue !important;
}

/deep/ tr.vxe-body--row.row-new {
  color: red !important;
}
</style>